<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>changeEvent</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	/* $(".username").change(function(){
		alert("s");
	}); */
	/**
	 * 监听input输入
	 */
	$(".username").on("input",function(){
		var value = $(this).val();
		var length = value.length;
		$(".tip").text(length +"/"+ (10-length));
	});
	
	$(".detail").on("input",function(){
		var value = $(this).val();
		var length = value.length;
		$(".tip2").text(length +"/"+ (20-length));
	});
});

/**
 * load(页面完全加载完毕执行)/unload(页面关闭时执行)
 */
 $(window).load(function(){
 	alert("load event");
 });
 
/* window.onbeforeunload = onbeforeunload_handler;     
     window.onunload = onunload_handler;    
    function onbeforeunload_handler(){     
        var warning="确认退出?";             
        return warning;     
    }     
         
    function onunload_handler(){     
        var warning="谢谢光临";     
        alert(warning);     
    }      */
var MSG_UNLOAD="内容没有保存，是否确认关闭窗口！";  
    var UnloadConfirm = {};  
    UnloadConfirm.set = function(confirm_msg){  
    window.onbeforeunload = function(event){      
    event = event || window.event;    
    event.returnValue = confirm_msg;      
    }  
       }  
    UnloadConfirm.clear = function(){  
        window.onbeforeunload = function(){};  
    }                      
    function onunload_handler(){        
        UnloadConfirm.clear();  
        document.forms[0].submit();    
    }    
    function closeWin(){  
        window.close();  
    }   
      
    function initPage(){  
          UnloadConfirm.set(MSG_UNLOAD);  
               
     }  
     initPage();  
     window.onunload = onunload_handler;  


/**
 * 显示时间
 */
function showTime(){
	var now = new Date();
	var y = now.getFullYear();
	var M = now.getMonth();
	var d = now.getDay();
	var h = now.getHours();
	var m = checkTime(now.getMinutes());
	var s = checkTime(now.getSeconds());
	
	$(".showTime").text(y +"-"+ M +"-"+ d +" "+ h +":"+ m +":"+ s);
	setTimeout("showTime()", 500);
}
function checkTime(t){
	if(t < 10){
		t = "0"+ t;
	}
	return t;
}
</script>
  </head>
<body>
 <div>input输入监听:<input type="text" class="username" maxlength="10"/> <span class="tip">0/10</span></div>
 <div>textarea输入监听:<textarea type="text" class="detail" maxlength="20"></textarea> <span class="tip2">0/20</span></div>
 <button onclick="showTime();">显示时钟</button> <span class="showTime"></span>
</body>
</html>
